<template>
  <view class="container">
    <view class="tabBar_top">
      <div class="logo">
        <div class="tab_tit">超脑智算</div>
      </div>
    </view>
    <view class="index_banner">
      <swiper
        class="screen-swiper square-dot"
        circular="true"
        indicator-dots="true"
        autoplay="true"
        interval="5000"
        duration="500"
      >
        <swiper-item
          v-for="(item, index) in carouselList"
          :key="index"
          @click="navToAdvUrls(item)"
        >
          <image :src="weburl + item.path" mode="scaleToFill"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="border-b-line padding-bottom-xs margin-lr">
      <view class="index_marquee">
        <gbro-marquee
          v-if="broadcastData"
          broadcastType="text"
          direction="left"
          :broadcastIconIsDisplay="true"
          :broadcastData="broadcastData"
          :broadcastStyle="broadcastStyle"
          style="width: 100%"
        >
        </gbro-marquee>
      </view>
    </view>
    <view class="index_fuli" @click="navToUrl('/pages/user/newuser')">
      <image
        class="fuliImg"
        src="/static/images/banner_fuli.png"
        @error="imageError"
      ></image>
    </view>

    <view class="index_menu">
      <view class="menu_item" @click="navToUrl('/pages/tasks/index')">
        <image
          class="menuImg"
          src="/static/images/menu_01.png"
          @error="imageError"
        ></image>
        <view view="menu_tit">任务中心</view>
      </view>
      <view class="menu_item" @click="navToUrl('/pages/user/invite')">
        <image
          class="menuImg"
          src="/static/images/menu_02.png"
          @error="imageError"
        ></image>
        <view view="menu_tit">邀请好友</view>
      </view>
      <view class="menu_item" @click="navToUrl('/pages/news/active')">
        <image
          class="menuImg"
          src="/static/images/menu_03.png"
          @error="imageError"
        ></image>
        <view view="menu_tit">活动中心</view>
      </view>
      <view class="menu_item" @click="navToUrl('/pages/user/guide')">
        <image
          class="menuImg"
          src="/static/images/menu_04.png"
          @error="imageError"
        ></image>
        <view view="menu_tit">新手指南</view>
      </view>
      <view class="menu_item" @click="navToUrl('/pages/games/lottery')">
        <image
          class="menuImg"
          src="/static/images/menu_05.png"
          @error="imageError"
        ></image>
        <view view="menu_tit">幸运抽奖</view>
      </view>
      <view class="menu_item" @click="navToUrl('/pages/help/kefuzx')">
        <image
          class="menuImg"
          src="/static/images/menu_06.png"
          @error="imageError"
        ></image>
        <view view="menu_tit">客户服务</view>
      </view>
      <view class="menu_item" @click="navToUrl('/pages/user/vip')">
        <image
          class="menuImg"
          src="/static/images/menu_07.png"
          @error="imageError"
        ></image>
        <view view="menu_tit">等级权益</view>
      </view>
      <view class="menu_item" @click="navToUrl('/pages/user/feedback')">
        <image
          class="menuImg"
          src="/static/images/menu_08.png"
          @error="imageError"
        ></image>
        <view view="menu_tit">意见反馈</view>
      </view>
    </view>

    <view class="index_prod">
      <view class="prod_tit">产品专区</view>
      <view
        class="prod_item_01"
        @click="navToUrl('/pages/invest/index?class_id=1')"
      >
        <image
          class="prodImg_01"
          src="/static/images/product_01.png"
          @error="imageError"
        ></image>
        <view class="prod_tit01">福利天地区</view>
        <view class="prod_tit0101">会员回报 福利翻倍</view>
      </view>
      <view class="prod_part2">
        <view
          class="prod_item_02"
          @click="navToUrl('/pages/invest/index?class_id=2')"
        >
          <image
            class="prodImg_02"
            src="/static/images/product_02.png"
            @error="imageError"
          ></image>
          <view class="prod_tit02">会员专属区</view>
          <view class="prod_tit0202">产品订阅</view>
        </view>
        <view
          class="prod_item_03"
          @click="navToUrl('/pages/invest/index?class_id=3')"
        >
          <image
            class="prodImg_03"
            src="/static/images/product_03.png"
            @error="imageError"
          ></image>
          <view class="prod_tit03">市场专区</view>
          <view class="prod_tit0303">合伙人订阅</view>
        </view>
      </view>
    </view>

    <view class="index_subs">
      <view class="prod_tit">热销订阅</view>
      <view class="subs_list">
        <view
          class="subs_item"
          v-for="(item, index) in prodList"
          :key="index"
          @click="navToUrl('/pages/invest/detail?id=' + item.id)"
        >
          <image
            class="subs_image"
            :src="weburl + item.img"
            mode="scaleToFill"
          ></image>
          <view class="subs_main">
            <view class="subs_name">{{ item.title }}</view>
            <image
              class="subs_hotimage"
              src="/static/images/icon_hot.png"
              @error="imageError"
            ></image>
            <view class="subs_price"
              ><span>{{ item.min }}</span
              >元</view
            >
            <view class="subs_profit"
              >收益：<span>￥{{ item.rate }}/天</span>周期：{{
                item.day
              }}天</view
            >
          </view>
        </view>
      </view>
    </view>

    <view class="index_video">
      <view class="prod_tit">视频专区</view>
      <view class="seemore" @click="navToUrl('/pages/news/video')">更多</view>
      <view class="cuIcon-right"></view>
      <view class="video_part">
        <video
          autoplay="false"
          src="https://thomasinebeckham.oss-cn-hongkong.aliyuncs.com/mp4/2.mp4"
        ></video>
      </view>
    </view>
    <view class="index_news">
      <view class="prod_tit news_tit">资讯中心</view>
      <view class="seemore" @click="navToUrl('/pages/news/list')">更多</view>
      <view class="cuIcon-right"></view>
      <view class="uni-list" style="bottom: 40px">
        <view
          class="uni-list-cell"
          hover-class="uni-list-cell-hover"
          v-for="(item, index) in news.lista"
          :key="index"
          @click="navToUrl('/pages/news/detail?news_id=' + item.id)"
        >
          <view class="uni-media-list">
            <image
              class="uni-media-list-logo"
              :src="weburl + item.photo"
            ></image>
            <view class="uni-media-list-body">
              <view class="uni-media-list-text-top">{{ item.title }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="news_part">
        <!-- 							<view v-for="(item,index) in news.lista" @click="navToUrl('/pages/news/detail?news_id='+item.id)" class="margin-tb-xl padding-tb-xl solid-top solid-bottom" style="display: flex;justify-content: space-between;">
								<view class="" style="width: 30%;">
									<image style="width: 100%;height: 91px;" :src="weburl+item.photo" mode=""></image>
								</view>
								<view class="" style="width: 60%;">
									<view class="uni-product-title" style="width: 100%;-webkit-line-clamp: 4;font-weight: bold;">
										&nbsp;&nbsp;《{{item.title}}》
									</view>
									<view class="uni-product-title" style="width: 100%;-webkit-line-clamp: 4;">
										&nbsp;&nbsp;{{item.keyword}}
									</view>
								</view>
								
								<view class="">
									
								</view>
							</view> -->
      </view>
    </view>

    <!-- #ifdef H5 -->
    <view class="index_app" v-if="showBottomDiv">
      <view class="cu-list grid col-5 no-border">
        <view class="cu-item">
          <image class="image" src="/static/logo.png" mode="widthFix"></image>
        </view>
        <view class="cu-item">
          <view class="text-white text-content text-left">{{ webtitle }}</view>
        </view>
        <view class="cu-item"> </view>
        <view class="cu-item">
          <view class="button" @click="navToUrl('/pages/user/app')"
            >下载APP</view
          >
        </view>
        <view class="cu-item">
          <uni-icons
            type="closeempty"
            color="#fff"
            size="20"
            @click="closeDiv()"
          />
        </view>
      </view>
    </view>
    <!-- #endif -->
    <uni-popup ref="gg" :show="isShowGonggao" type="center">
      <view class="popup_mask"></view>
      <view class="popup_content" :style="{ bottom: popupBottom }">
        <view class="title">
          {{ gonggao_title }}
        </view>
        <view class="explain_text">
          <rich-text
            :nodes="gonggao ? getHtml(gonggao) : ' '"
            space="true"
            selectable="true"
          />
        </view>
        <view class="button">
          <button
            @click="$refs.gg.close()"
            class="text-white"
            style="background-color: coral; display: inline-block"
          >
            关闭
          </button>
          <button
            @click="navToUrl('/pages/help/detail?id=1')"
            class="text-white"
            style="
              background-color: coral;
              display: inline-block;
              margin-left: 30rpx;
            "
          >
            阅读公告
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->
    <tabBar :currentPage="currentPage"></tabBar>
  </view>
</template>

<script>
// import p2pItem from '../invest/lists.vue';
import htmlParser from "../../common/html-parser";
import tabBar from "@/components/tabBar/tabBar.vue";
import gbroMarquee from "@/components/GBroMarquee/marquee.vue";
import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import uniList from "@/components/uni-list/uni-list.vue";
import uniListItem from "@/components/uni-list-item/uni-list-item.vue";
export default {
  components: {
    tabBar,
    gbroMarquee,
    uniIcons,
    // p2pItem
  },
  data() {
    return {
      index_top: "",
      avatar: "",
      userinfo: {
        avatar: "",
      },

      info: {},
      currentPage: "/pages/index/index",
      loading: !1,
      loaded: !1,
      broadcastData: "",
      broadcastStyle: {
        speed: 2, //每秒3个字
        font_size: "28", //字体大小(upx)
        text_color: "#000000", //字体颜色
        back_color: "#f3f4f8", //背景色
      },
      swiperCurrent: 0,
      swiperLength: 0,
      carouselList: [],
      items: [],
      project_items: [],
      projectItems: [],
      classification: [],
      showLoadMore: true,
      isLoading: !1,
      modalName: null,
      launchFlag: !1,
      showBottomDiv: 0,
      policyStorageKey: "has_read_privacy",
      showPopup: 1,
      modalName: null,
      cateid: 0,
      classify: [],
      page: 1,
      lastPage: 0,
      loadMoreText: "加载中...",
      items: [],
      project_items: [],
      isAvatar: -1,
      gonggao: "",
      gonggao_title: "",
      isShowGonggao: false,
      title: "全部项目",
      prodList: [],
      news: [],
    };
  },
  onLoad: function (option) {
    this.loadBanners();
    // this.loadTasks();
    this.loadData();
    this.loadNotice();
    this.loadInvest();
    this.info = uni.getStorageSync("userinfo");
    this.getTasksList();
    this.getNews();
    this.isAvatar = -1;
    this.title = "全部项目";
    this.cateid = option.cateid;
    //this.setGonggaoBottom();
    // this.getData();
  },

  onShow() {
    uni.hideTabBar({});
    this.info = uni.getStorageSync("userinfo");
    this.loadImg();
    // this.getData();
  },
  onUnload() {
    (this.page = 1),
      (this.lastPage = 0),
      (this.list = []),
      (this.loadMoreText = "加载中..."),
      (this.showLoadMore = true);
  },
  onReachBottom() {
    // console.log("onReachBottom");
    if (this.page >= this.lastPage) {
      this.loadMoreText = "没有更多数据了!";
      return;
    } else {
      setTimeout(() => {
        this.getData();
        this.getTasksList();
      }, 300);
    }
  },
  created: function () {
    var that = this;
    uni.getStorage({
      key: this.policyStorageKey,
      success: (res) => {
        if (res.data) {
          that.showPopup = false;
        }
      },
      fail: function (e) {
        that.showPopup = true;
      },
    });
  },
  computed: {
    popupBottom() {
      let ggLength = this.gonggao ? this.gonggao.length : 0;
      //console.log('a',ggLength);
      if (ggLength > 600) {
        return "10%";
      } else if (ggLength <= 600 && ggLength > 400) {
        return "20%";
      } else {
        return "30%";
      }
    },
  },
  methods: {
    // H5数据
    loadData: function () {
      //获取基础参数
      let timestamp = this.helper.now();
      let sign = this.helper.setSign([
        "key=appdiv_open",
        "timestamp=" + timestamp,
      ]);
      this.helper
        .req({
          api: "getInfoSet",
          timestamp: timestamp,
          data: {
            key: "appdiv_open",
          },
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          // console.log(res.data.data)
          this.showBottomDiv = res.data.data.value;
        });
    },
    hideModal: function () {
      this.modalName = null;
    },
    loadInvest: function () {
      let page = this.page;
      let info = uni.getStorageSync("userinfo");
      let timestamp = this.helper.now();
      let sign = this.helper.setSign([
        "class=" + this.cateid,
        "page=" + page,
        "token=" + info.token,
        "timestamp=" + timestamp,
      ]);
      this.helper
        .req({
          api: "getInvestList",
          timestamp: timestamp,
          data: { class: this.cateid, page: page, token: info.token },
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          // console.log(res.data.data.list.data);
          this.prodList = res.data.data.list.data;

          uni.hideLoading();
        });
    },
    loadBanners: function () {
      // uni.showLoading({
      // 	title: "数据加载中",
      // 	mask: true
      // })
      let timestamp = this.helper.now();
      let sign = this.helper.setSign(["type=home", "timestamp=" + timestamp]);
      this.helper
        .req({
          api: "getBanners",
          timestamp: timestamp,
          data: {
            type: "home",
          },
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          // console.log(res);
          this.carouselList = res.data.data.list;
          this.swiperLength = this.carouselList.length;

          uni.hideLoading();
        });
    },
    loadNotice: function () {
      let timestamp = this.helper.now();
      let sign = this.helper.setSign(["timestamp=" + timestamp]);
      this.helper
        .req({
          api: "getNotice",
          timestamp: timestamp,
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          this.broadcastData = [res.data.data.notice, res.data.data.notice];
          let gonggaoArr = res.data.data.gonggao;
          if (gonggaoArr.show == 1) {
            this.gonggao = gonggaoArr.content;
            this.gonggao_title = gonggaoArr.title;
            this.isShowGonggao = true;
            this.$refs.gg.open();
          }
        });
    },

    //资讯
    getNews: function () {
      let timestamp = this.helper.now();
      let sign = this.helper.setSign(["timestamp=" + timestamp]);
      this.helper
        .req({
          api: "getNewsList",
          timestamp: timestamp,
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          this.news = res.data.data;
        });
    },
    //项目和宝库、活动接口
    loadTasks: function () {
      // uni.showLoading({
      // 	title: "数据加载中",
      // 	mask: true
      // })
      var token = "token";
      var info = uni.getStorageSync("userinfo");
      if (info.token) {
        token = info.token;
      }
      let timestamp = this.helper.now();
      let sign = this.helper.setSign([
        "token=" + token,
        "timestamp=" + timestamp,
      ]);
      this.project_items = [];
      this.helper
        .req({
          api: "getIndexTasks",
          timestamp: timestamp,
          data: {
            token: token,
          },
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          // console.log(res.data);
          this.items = res.data.data.items;
          res.data.data.project_items.map((item) => {
            if (this.project_items.length == 0 && item.title == "宝库") {
              this.project_items.push(item);
            }
          });
          // this.project_items = res.data.data.project_items;

          uni.hideLoading();
        });
    },
    swiperChange: function (e) {
      var t = e.detail.current;
      this.swiperCurrent = t;
    },
    //活动点击事件
    navToTask: function (e) {
      if (e.url == "/pages/games/qiandao") {
        this.helper.checkLogin();
        var token = "token";
        var info = uni.getStorageSync("userinfo");
        if (info.token) {
          token = info.token;
        }
        let timestamp = this.helper.now();
        let sign = this.helper.setSign([
          "token=" + token,
          "timestamp=" + timestamp,
        ]);
        this.helper
          .req({
            api: "doQiandao",
            timestamp: timestamp,
            data: {
              token: token,
            },
            header: {
              sign: sign,
            },
            method: "POST",
          })
          .then((res) => {
            uni.showModal({
              title: "提示",
              content: res.data.message,
              showCancel: false,
              confirmText: "确定",
              success: function (res) {},
            });
            uni.hideLoading();
          });
      } else {
        return uni.navigateTo({
          url: e.url,
        });
      }
    },
    //轮播图点击事件
    navToAdvUrls: function (e) {
      return uni.navigateTo({
        url: e.url,
      });
    },
    //隐私策略
    navToUrl: function (url) {
      return uni.navigateTo({
        url: url,
      });
    },
    onImageLoad: function (e, t) {
      this.$set(this[e][t], "loaded", "loaded");
    },
    onImageError: function (e, t) {
      this[e][t].icon = "/static/errorImage.jpg";
    },
    closeDiv: function () {
      this.showBottomDiv = false;
    },
    back: function () {
      this.$emit("popupState", false);
      // #ifdef APP-PLUS
      plus.runtime.quit();
      // #endif
    },
    // 关闭弹框
    confirm: function () {
      this.showPopup = false;
      this.$emit("popupState", true);

      uni.setStorage({
        key: this.policyStorageKey,
        data: true,
      });
    },
    goto() {
      uni.switchTab({
        url: "/pages/user/person",
      });
    },
    // 获取顶部img
    loadImg: function () {
      var range = Math.round(Math.random() * (99999 - 11111)) + 11111;
      this.index_top = this.weburl + "/storage/upload/index_top.png?k=" + range;
      this.avatar = this.weburl + "/storage/upload/icon_avatar.png?k=" + range;
    },
    getHtml(content) {
      return htmlParser(content);
    },
    //项目分类
    async getTasksList() {
      // uni.showLoading({
      // 	title: "数据加载中",
      // 	mask: true
      // })
      var info = await uni.getStorageSync("userinfo");
      let timestamp = await this.helper.now();
      let sign = await this.helper.setSign([
        "token=" + info.token,
        "timestamp=" + timestamp,
      ]);
      await this.helper
        .req({
          api: "getInvestIndex",
          timestamp: timestamp,
          data: {
            token: info.token,
          },
          header: {
            sign: sign,
          },
          method: "GET",
        })
        .then((res) => {
          // console.log('项目分类:', res.data.data);
          this.projectItems = res.data.data.projectItems;
          res.data.data.projectItems.map((item) => {
            if (this.classification.indexOf(item.classname) == -1) {
              this.classification.push(item.classname);
            }
          });

          uni.stopPullDownRefresh();
          uni.hideLoading();
        });
    },
    //个人信息接口
    getData: function () {
      //获取基础参数
      // uni.showLoading({
      // 	title: "数据加载中",
      // 	mask: true
      // })
      var info = uni.getStorageSync("userinfo");
      if (!this.info || this.info == undefined || this.info == null) {
        uni.navigateTo({
          url: "../login/login",
        });
      }
      if (info.token) {
        let timestamp = this.helper.now();
        let sign = this.helper.setSign([
          "username=" + info.username,
          "token=" + info.token,
          "timestamp=" + timestamp,
        ]);
        this.helper
          .req({
            api: "getUserInfo",
            timestamp: timestamp,
            data: {
              username: info.username,
              token: info.token,
            },
            header: {
              sign: sign,
            },
            method: "GET",
          })
          .then((res) => {
            this.userinfo = res.data.data.userinfo;
            if (this.userinfo.avatar) {
              this.avatar = this.weburl + this.userinfo.avatar;
            }
            setTimeout(() => {
              uni.hideLoading();
            }, 300);
            this.$forceUpdate();
          });

        timestamp = this.helper.now();
        sign = this.helper.setSign([
          "token=" + info.token,
          "timestamp=" + timestamp,
        ]);
        this.helper
          .req({
            api: "getSignInList",
            timestamp: timestamp,
            data: {
              token: info.token,
            },
            header: {
              sign: sign,
            },
            method: "GET",
          })
          .then((res) => {
            //console.log("sign:"+res)
          });
      } else {
        uni.hideLoading();
      }
    },
    imageError: function (e) {
      this.avatar = "/static/icon_avatar.png";
    },
    onBtn: async function (title, index) {
      this.title = title;
      this.isAvatar = index;
      if (this.isAvatar == -1) {
        await this.getTasksList();
      } else {
        await this.getTasksList();
        // await this.$nextTick(() => {
        let arr = [];
        this.projectItems.map((item) => {
          if (item.classname == this.title) {
            arr.push(item);
          }
        });

        this.projectItems = arr;
        // console.log(arr)
        // })
      }
    },
    navToDetails: function (e) {
      return uni.navigateTo({
        url: "/pages/invest/details?code=" + e.id,
      });
    },
  },
};
</script>

<style lang="scss">
$width: 100%;

page {
  background-color: #f3f4f8;
}
.uni-loadmore {
  margin-bottom: 60px;
}
.labelImg {
  width: 100vw;

  .baoKu {
    width: 100%;
    margin: 20px;
    background-color: #fff;

    .image {
      width: 100%;
      height: 129px;
    }
  }
}

.viewDisplay {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  // margin: 12px 16px;
  .box {
    width: 43.5vw;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 8px;
    padding-bottom: 16px;
    background-color: #ffffff;
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;

    .img {
      width: $width;
      height: $width;
      min-height: 129px;
      background-size: cover;
    }

    h3 {
      padding: 14px 0;
      padding-left: 4px;
      font-size: 16px;
      font-weight: 600;
      color: #000000;
      line-height: 1.06rem;
    }

    .txt {
      padding: 4px;
      color: #6e6e6e;
      font-size: 10px;
      display: flex;
      justify-content: space-around;
      align-items: baseline;
      margin-bottom: -5px;
      span {
        width: 35%;
        box-sizing: border-box;
      }

      .value {
        text-align: left;
        flex-grow: 1;
      }
    }
    /* 缩短两个列之间的间距 */
    .txt > span:first-child {
      margin-right: 1px; /* 通过 margin 来增加两个列之间的外边距，这里的值可以根据需要调整 */
    }
    .txtColor {
      color: #ffffff;
      padding: 4px;
      margin-top: 8px;
      font-size: 12px;
      border-radius: 10px;
    }

    .bottomTxt {
    }
  }
}

.taskTitle {
  min-height: 169upx;
  margin: 16px 8px;
  padding: 6px 0px;
  border-radius: 0.32rem;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.taskBox {
  display: block;
  margin: 16px 8px;
  padding: 6px 0px;
  background-color: #f8f8f8;
  border-radius: 0.32rem;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}

.taskBox_btn {
  margin: 0;
  display: inline-block;
  color: #000;
  width: 30%;
  font-weight: bold;
  bordercolor: #f97c27;
  border-radius: 0;
}

.borderBottom {
  border-bottom: 2px solid #f97c27;
}

.is-hover {
  color: #ffffff;
  border-radius: 0.32rem;
  background-color: #f97c27;
  border-color: #f97c27;
}

.tabBar_top {
  height: 80upx;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: rgba(232, 228, 229, 0);
  color: #000;
  border-bottom-left-radius: 10upx;
  border-bottom-right-radius: 10upx;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab_tit {
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}

.logo {
  width: 39%;
  height: 80upx;

  display: flex;
  align-items: center;
}

.logo .logoImg {
  width: 80%;
  height: 33px;
  background-size: cover;
}

.info {
  height: 100upx;
  box-sizing: border-box;
  padding: 4px 12px;
  // padding-right: 24px;
  font-size: 16px;

  display: flex;
  align-items: center;
}

.info span {
  padding-right: 12px;
}

.info .infoImg {
  width: 71upx;
  height: 71upx;
  border-radius: 50%;
}

.container {
  // margin-top: 139upx;
}

.index_banner {
  width: 100vw;
  margin-top: 80upx;
  // margin-left: 4%;
  // margin-bottom: 20upx;
  // margin-top: -140upx;
}

.marginBottom {
  margin-top: 129upx;
  padding-bottom: 109upx;
}

.index_banner image {
  border-radius: 10upx;
}

.cu-item image {
  width: 92%;
  margin: 1% auto;
}

.screen-swiper {
  min-height: 380upx;
  box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
  background: #f9f9fc;
}

.index_marquee {
  margin-top: 16px;
}

.index_fuli {
  margin-top: 20upx;
}
.fuliImg {
  width: 96%;
  height: 65px;
  margin-left: 2%;
}
.index_menu {
  //margin-top: 20upx;
  margin-left: 2%;
  width: 96%;
  height: 180px;
  padding: 10px 0;
  background-color: #fff;
  border-radius: 6px;
}
.menu_item {
  width: 25%;
  height: 80px;
  text-align: center;
  float: left;
  margin-top: 4px;
}
.menuImg {
  width: 54px;
  height: 54px;
}

.index_prod {
  margin-top: 20upx;
  margin-left: 2%;
  width: 96%;
  height: 200px;
  padding: 10px 0;
  background-color: #fff;
  border-radius: 6px;
}
.prod_tit {
  font-size: 14px;
  margin: 4px 0 10px 10px;
}

.seemore {
  font-size: 14px;
  padding: 8px 0;
  position: absolute;
  right: 30px;
  top: 4px;
  color: #666;
}

.cuIcon-right {
  position: absolute;
  right: 10px;
  top: 12px;
}

.prod_item_01 {
  width: 40%;
  height: 140px;
  margin-left: 2%;
  position: relative;
  float: left;
}
.prodImg_01 {
  width: 100%;
  height: 150px;
}
.prod_tit01 {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 15px;
  color: #e7635a;
  font-weight: bold;
}
.prod_tit0101 {
  position: absolute;
  left: 10px;
  top: 32px;
  font-size: 13px;
  color: #e5aca4;
}

.prod_part2 {
  width: 54%;
  height: 140px;
  margin-right: 3%;
  position: relative;
  float: right;
}

.prod_item_02 {
  width: 100%;
  height: 70px;
  margin-left: 2%;
  position: relative;
}
.prodImg_02 {
  width: 100%;
  height: 70px;
}
.prod_tit02 {
  position: absolute;
  left: 20px;
  top: 14px;
  font-size: 15px;
  color: #329a77;
  font-weight: bold;
}
.prod_tit0202 {
  position: absolute;
  left: 24px;
  top: 40px;
  font-size: 12px;
  color: #329a77;
}

.prod_item_03 {
  width: 100%;
  height: 70px;
  margin-left: 2%;
  margin-top: 8px;
  position: relative;
}
.prodImg_03 {
  width: 100%;
  height: 70px;
}
.prod_tit03 {
  position: absolute;
  left: 20px;
  top: 14px;
  font-size: 15px;
  color: #477eba;
  font-weight: bold;
}
.prod_tit0303 {
  position: absolute;
  left: 24px;
  top: 40px;
  font-size: 12px;
  color: #477eba;
}

.index_subs {
  margin-top: 20upx;
  margin-left: 2%;
  width: 96%;
  padding: 10px 0;
  background-color: #fff;
  border-radius: 6px;
}
.subs_list {
  margin-top: 20upx;
  margin-left: 2%;
  width: 96%;
  // padding: 10px 0;
  background-color: #fff;
  border-radius: 6px;
}
.subs_item {
  width: 100%;
  height: 120px;
  // position: relative;
}
.subs_image {
  width: 90px;
  height: 90px;
  margin-top: 6px;
  float: left;
  border-radius: 6px;
}
.subs_hotimage {
  width: 85px;
  height: 20px;
  margin-top: 6px;
  border-radius: 0px;
}
.subs_main {
  float: left;
  padding-left: 14px;
  position: relative;
  width: 220px;
}
.subs_main img {
  height: 16px;
  border-radius: 4px;
}
.subs_name {
  line-height: 30px;
  font-size: 16px;
}
.subs_price {
  color: #ff3333;
  line-height: 30px;
}
.subs_price span {
  font-size: 18px;
  font-weight: bold;
}
.subs_profit {
  line-height: 16px;
  padding: 2px 8px;
  font-size: 12px;
  background: #fff0ca;
  border-radius: 4px;
}
.subs_profit span {
  width: 80px;
  display: inline-flex;
}

.index_video {
  margin-top: 20upx;
  margin-left: 2%;
  width: 96%;
  padding: 10px 0;
  background-color: #fff;
  border-radius: 6px;
  position: relative;
}
.video_part {
  width: 100%;
}
.video_part video {
  width: 100%;
  // height: 200px;
}
.index_news {
  margin-top: 20upx;
  margin-left: 2%;
  width: 96%;
  padding: 0 0 10px 0;
  background-color: #fff;
  border-radius: 6px;
  position: relative;
}
.news_tit {
  width: 100%;
  padding-left: 10px;
  margin-left: 0;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
.news_part {
  padding: 0 10px;
  font-size: 14px;
  line-height: 30px;
}

.index_task {
  margin-top: 20upx;
}

.index_task .title_icon image {
  width: 200upx;
}

.index_app {
  position: fixed;
  bottom: 100upx;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.index_app .button {
  display: block;
  width: 140upx;
  height: 56upx;
  margin: 20upx 10upx;
  line-height: 56upx;
  text-align: center;
  border-radius: 2500upx;
  background-color: #fd5a21;
  color: #fff;
  font-size: 26upx;
}

.index_app .cu-list.grid.no-border {
  padding: 10upx 5upx;
}

.index_app .cu-list .cu-item image {
  width: 100upx;
  margin: 1% auto;
}

.index_app .cu-list.grid {
  background: none;
}

.index_app .cu-list.grid.no-border > .cu-item {
  padding: 0;
}

.index_app .text-content {
  line-height: 100upx;
}

.index_app .cu-list.grid > .cu-item uni-text.uni-icons {
  line-height: 80upx;
}

.cu-list.grid {
  background-color: #f3f4f8;
}

.cu-list.grid.no-border {
  padding: 0 10upx;
}

.cu-list + .cu-list {
  margin: 0;
}

.col-1 .cu-item uni-image {
  width: 96%;
  margin: 0 auto;
}

.popup_mask {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition-property: opacity;
  transition-duration: 0.3s;
  opacity: 0;
  z-index: 98;
}

.popup_mask {
  opacity: 1;
}

.popup_content {
  overflow: hidden;
  box-sizing: border-box;
  padding: 40upx 20upx 0 20upx;
  position: fixed;
  bottom: 10%;
  border-radius: 8px;
  left: 50%;
  margin-left: -40%;
  right: 0;
  min-height: 400upx;
  background: #fdfdfdde;
  color: #141313;
  width: 80%;
  z-index: 99;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-weight: bold;

  .title {
    text-align: center;
    font-size: 36upx;
    padding: 10upx 0 0 0;
  }

  .explain_text {
    font-size: 25upx;
    padding: 30upx 30upx 40upx 0upx;
    //line-height: 50upx;
    overflow-wrap: break-word; /* 兼容性较好的属性，用于控制文本换行 */
    word-wrap: break-word; /* 旧版本浏览器兼容 */

    .line {
      display: block;

      .path {
        color: #007aff;
        display: inline-block;
        text-align: center;
      }
    }
  }

  .button {
    display: flex;
    padding: 30upx 20upx;
    align-items: center;
    font-size: 34upx;
    justify-content: space-around;
    border-top: 2upx solid #f2f2f2;

    view {
      text-align: center;
    }
  }
}
</style>
